<template>
  <div class="app-container">
    <el-card class="card-form">
      <div class="expert-title-outBox">
        <div class="expert-title">年度申报</div>
        <div class="back-btn" @click="handBack">
          <img src="@/assets/images/tripartite/back_button.png" alt="" />返回
        </div>
      </div>
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="92px"
        label-position="left"
      >
        <!-- 基本信息 -->
        <div>
          <div class="model-title">
            <img src="../../../assets/images/tripartite/icon_title.png" />
            <span>基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="计划名称" prop="planName">
                <el-input
                  v-model="formData.planName"
                  disabled
                  size="medium"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目名称" prop="entryName">
                <el-input
                  v-model="formData.entryName"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  maxlength="30"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-col :span="19" style="paddingRight:0">
                <el-form-item label="项目类别" prop="projectCategory">
                  <el-select
                    v-model="formData.projectCategory"
                    placeholder="请选择"
                    clearable
                    size="medium"
                    style="width:100%"
                  >
                    <el-option
                      v-for="dict in projectCategoryOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <div class="demo-download"></div>
              </el-col>
            </el-col>            
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="投资估算" prop="projectInvestmentEstimation">
                <el-input
                  v-model="formData.projectInvestmentEstimation"
                  placeholder="请输入"
                  clearable
                  maxlength="14"
                  size="medium"
                />
                <div class="unit">万元</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资金来源" prop="sourceOfFunds">
                <el-select
                  v-model="formData.sourceOfFunds"
                  placeholder="请选择"
                  clearable
                  size="medium"
                  style="width:100%"
                >
                  <el-option
                    v-for="dict in sourceOfFundsOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-col :span="19" style="paddingRight:0">
                <div @click="handleImport">
                  <el-form-item label="项目建议书" prop="projectProposalFile.fileName">
                    <el-input
                      v-model="formData.projectProposalFile.fileName"
                      placeholder="请选择文件"
                    />
                    <div class="img_box">
                      <img
                        src="@/assets/images/tripartite/icon_files_upload.png"
                        alt=""
                      />
                    </div>
                  </el-form-item>
                </div>
                
              </el-col>
              <el-col :span="5" style="paddingRight:0;">
                <!-- <a href="http://cqaivm.860001.xyz:12241/yzq-approve/信息化项目建议书模板.doc" target="_blank" download="downloadFileName" class="demo-download">模版下载</a> -->
                <el-button
                  type="text"
                  size="medium"
                  @click="downloadFile"
                  >
                  模版下载
                </el-button>
              </el-col>
            </el-col>
          </el-row>
          <!-- 项目建设理由 -->
          <el-row class="form-textarea">
            <el-form-item
              label="项目建设理由"
              prop="reasonsForProjectConstruction"
              label-width="140px"
            >
              <el-input
                v-model="formData.reasonsForProjectConstruction"
                placeholder="请输入项目建设到具体理由或相关文件批示、会议纪要等依据"
                clearable
                type="textarea"
                size="medium"
                :rows="4"
                maxlength="300"
                show-word-limit
              />
            </el-form-item>
          </el-row>
          <!-- 项目内容简介 -->
          <el-row class="form-textarea">
            <el-form-item
              label="项目内容简介"
              prop="projectContentIntroduction"
              label-width="140px"
            >
              <el-input
                v-model="formData.projectContentIntroduction"
                placeholder="请输入项目内容简介"
                clearable
                type="textarea"
                size="medium"
                :rows="4"
                maxlength="300"
                show-word-limit
              />
            </el-form-item>
          </el-row>
          <!-- 预期效果描述 -->
          <div class="form-textarea">
            <el-form-item
              label="预期效果描述"
              prop="expectedEffectDescription"
              label-width="140px"
            >
              <el-input
                v-model="formData.expectedEffectDescription"
                placeholder="请输入预期效果描述"
                clearable
                type="textarea"
                size="medium"
                :rows="4"
                maxlength="300"
                show-word-limit
              />
            </el-form-item>
          </div>
          <!-- 项目进展 -->
          <div class="form-textarea">
            <el-form-item
              label="项目进展（预计项目开展时间、运营模式、项目阶段、项目进度等）"
              prop="workCompletion"
              label-width="500px"
            >
              <el-input
                v-model="formData.workCompletion"
                placeholder="请输入规划、方案、可研、审批手续办理情况"
                clearable
                type="textarea"
                size="medium"
                :rows="4"
                maxlength="300"
                show-word-limit
              />
            </el-form-item>
          </div>
        </div>
        <!-- 联系方式 -->
        <div>
          <div class="model-title">
            <img src="@/assets/images/tripartite/icon_title.png" />
            <span>联系方式</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="业主单位" prop="constructionUnit">
                <el-select
                  v-model="formData.constructionUnit"
                  placeholder="请选择业主单位"
                  clearable
                  size="medium"
                  style="width: 100%"
                  filterable
                >
                  <el-option
                    v-for="dict in constructionUnitOptions"
                    :key="dict.dictKey"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="责任科室" prop="department">
                <!-- <el-select
                  v-model="formData.department"
                  placeholder="请选择责任科室"
                  clearable
                  size="medium"
                  style="width: 100%"
                  filterable
                >
                  <el-option
                    v-for="dict in departmentOptions"
                    :key="dict.dictKey"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select> -->
                <el-input
                  v-model="formData.department"
                  placeholder="请输入责任科室"
                  clearable
                  size="medium"
                  maxlength="20"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="项目负责人" prop="projectLeader">
                <el-input
                  v-model="formData.projectLeader"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  maxlength="10"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8"
              ><el-form-item label="负责人电话" prop="telephoneNumber">
                <el-input
                  v-model="formData.telephoneNumber"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  maxlength="13"
                /> </el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8"
              ><el-form-item label="项目联系人" prop="projectContact">
                <el-input
                  v-model="formData.projectContact"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  maxlength="10"
                /> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="联系人电话" prop="contactTelephone">
                <el-input
                  v-model="formData.contactTelephone"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  maxlength="13"
                /> </el-form-item
            ></el-col>
          </el-row>
        </div>
        <el-form-item class="submit-outBox">
          <el-button size="small" class="btn" @click="handBack">取消</el-button>
          <el-button size="small" class="btn btn-save" type="primary" @click="submitForm(1)"
            >保存</el-button
          >
          <el-button size="small" class="btn btn-submit" type="primary" @click="submitForm(0)"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 文件上传对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="498px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".doc, .docx, .zip, .rar, .7z"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入".doc, .docx, .zip, .rar, .7z"格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import {
  listAnnualDeclaration,
  addAnnualDeclaration,
  updateAnnualDeclaration,
  listAnnualName,
  getAnnualName
} from "@/api/projectCompany/annualReturn";
import {getUnit,getDept} from "@/api/projectCompany/myProject";
import CONST from '@/utils/constant';

export default {
  data() {
    return {
      // 弹出层标题
      title: "",
      // 表单参数
      formData: {projectProposalFile:{fileName:'',fileUrl:''},projectProposal:{fileName:'',fileUrl:''}},
      // 表单校验
      rules: {
        planName: [
          { required: true, message: "请选择年度计划", trigger: "change" },
        ],
        entryName: [
          { required: true, message: "项目名称不能为空", trigger: "blur" },
        ],
        projectCategory: [
          { required: true, message: "请选择项目类别", trigger: "change" },
        ],
        // supplementaryVoucher: [
        //   { required: true, message: "增补凭证不能为空", trigger: "blur" },
        // ],
        projectInvestmentEstimation: [
          { required: true, message: "请输入投资估算", tigger: ["blur","change"] },
          {
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,6})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入正确格式,可保留六位小数",
          },
        ],
        sourceOfFunds: [
          { required: true, message: "请选择资金来源", trigger: "change" },
        ],
        "projectProposalFile.fileName": [
          { required: true, message: "项目建议书不能为空", trigger: "change" },
        ],
        reasonsForProjectConstruction: [
          { required: true, message: "项目建设理由不能为空", trigger: "blur" },
        ],
        projectContentIntroduction: [
          { required: true, message: "项目内容简介不能为空", trigger: "blur" },
        ],
        expectedEffectDescription: [
          { required: true, message: "预期效果描述不能为空", trigger: "blur" },
        ],
        workCompletion: [
          {
            required: true,
            message: "项目进展不能为空",
            trigger: "blur",
          },
        ],
        projectLeader: [
          { required: true, message: "项目负责人不能为空", trigger: "blur" },
        ],
        telephoneNumber: [
          { required: true, message: "负责人电话不能为空"},
          // {
          //   pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          //   message: "请输入正确的手机号码",
          //   trigger: "blur"
          // }
        ],
        projectContact: [
          { required: true, message: "项目联系人不能为空", trigger: "blur" },
        ],
        contactTelephone: [
          { required: true, message: "联系人电话不能为空"},
          // {
          //   pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          //   message: "请输入正确的手机号码",
          //   trigger: "blur"
          // }
        ],
        constructionUnit: [{ required: true, message: "请选择业主单位", trigger: "change" },],
        // department: [{ required: true, message: "请输入责任科室", trigger: "blur" },],
      },
       // 项目类别数据字典
      projectCategoryOptions: [
        { dictValue: "0", dictLabel: "建设类（新开工）" },
        { dictValue: "1", dictLabel: "建设类（续建）" },
        { dictValue: "2", dictLabel: "购买服务类" },
        { dictValue: "3", dictLabel: "运维类" },
        { dictValue: "4", dictLabel: "其他" },
      ],
      // 责任科室字典查询
      departmentOptions:[{dictValue:'',dictLabel:''}],
      // 业主单位字典查询
      constructionUnitOptions:[{dictValue:'',dictLabel:''}],
      // 资金来源数据字典
      sourceOfFundsOptions: [
        { dictValue: "0", dictLabel: "区财政资金" },
        { dictValue: "1", dictLabel: "其他" },
      ],
      // 上传文件参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传文件名称
        fileName: "请选择文件",
      },
    };
  },
  created() {
    const annualId = this.$route.query.proId;
    console.log(annualId,'annualId');
    if(annualId||annualId!==undefined){     
      getAnnualName(annualId).then(response=>{
          this.formData = response
          // this.formData.telephoneNumber = parseInt(response.telephoneNumber)
          // this.formData.contactTelephone = parseInt(response.contactTelephone)
          this.formData.projectInvestmentEstimation = response.projectInvestmentEstimation + ''
          this.formData.projectProposal = this.formData.projectProposalFile
          console.log(this.formData,'编辑年度',typeof(this.formData.projectInvestmentEstimation));
      })
    }else{
      this.reset()
    }
    this.getUnitDict();
    // this.getDeptDict();
  },
  methods: {
    /** 业主单位字典获取 */
    getUnitDict(){
      getUnit().then(response=>{
        if(response.code===200){
          this.constructionUnitOptions = response.data.map((item,index) => {
            return {
              dictValue: item,
              dictLabel: item,
              dictKey: index,
            }
          })
        }
      })
    },
    /** 责任科室字典获取 */
    getDeptDict(){
      getDept().then(response=>{
        if(response.code===200){
          this.departmentOptions = response.data.map((item,index) => {
            return {
              dictValue: item,
              dictLabel: item,
              dictKey: index,
            }
          })
        }
      })
    },
    // 表单重置
    reset() {
      this.formData = {
        planName: this.$route.query.planName?this.$route.query.planName:this.formData.planName,
        entryName: "",
        contactTelephone: "",
        expectedEffectDescription: "",
        preliminaryWorkCompletion: "",
        projectCategory: "",
        projectContact: "",
        projectContentIntroduction: "",
        projectInvestmentEstimation: undefined,
        projectLeader: "",
        projectProposal: {fileName:'',fileUrl:''},
        projectProposalFile:{fileName:'',fileUrl:''},
        reasonsForProjectConstruction: "",
        sourceOfFunds: "",
        supplementaryVoucher: "",
        telephoneNumber: "",
        temporaryFlag: "0", //暂存标识
        workCompletion: "",
      };
      this.resetForm("formData");
    },
    /** 返回按钮操作 */
    handBack() {
      this.reset();
      // this.$router.push({
      //   path: "/manage/myProject",
      // });
      this.$router.back()
    },
    // 提交按钮（表单）
    submitForm(temporaryFlag) {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          this.formData.temporaryFlag = temporaryFlag
          console.log('新增年度项目测试',this.formData);
          const annualId = this.$route.query.proId;
          if (annualId != undefined) {
            updateAnnualDeclaration(this.formData).then((response) => {
              this.msgSuccess("修改成功");
              // this.$router.push({
              //   path: "/manage/myProject",
              // });
              this.$router.back()
            });
          } else {
            this.formData.supplementaryVoucher = this.formData.projectProposalFile
            this.formData.planId = this.$route.query.planId
            addAnnualDeclaration(this.formData).then((response) => {
              console.log('新增年度项目保存',this.formData);
              this.msgSuccess(temporaryFlag==0?"提交成功":"保存成功");
              // this.$router.push({
              //   path: "/manage/myProject",
              // });
              this.$router.back()
            });
          }
        }
      });
    },

    /** 文件上传操作 */
    handleImport() {
      this.upload.title = "附件";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      if(response.code!=500&&response.data){
        this.formData.projectProposalFile.fileName = file.name
        this.formData.projectProposalFile.fileUrl = response.data.fileUrl
        this.formData.projectProposal.fileName = file.name
        this.formData.projectProposal.fileUrl = response.data.fileUrl
      }else{
        this.$message.error(response.msg)
      }      
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 模版下载 */
    downloadFile() {
      window.location.href = `${CONST.TPL_DOWNLOAD}/yzq-approve/信息化项目建议书模板.doc`;
    },
  },
};
</script>
<style scoped lang="scss">
.expert-title-outBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .expert-title {
    font-weight: 500;
    font-size: 18px;
  }
  .back-btn {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      position: relative;
      top: 2px;
    }
  }
}
.submit-outBox {
  margin-left: 0;
  padding-top: 48px;
  width: 100%;
  text-align: center;
  border-top: 1px solid #ebecef;
  .btn {
    width: 196px;
    height: 40px;
    margin-right: 10px;
  }
  .btn-submit {
    background: #0d72ff;
  }
  .btn-save {
    border: 1px solid #3171ee;
    color: #3171ee;
    background: #fff;
  }
}
.model-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebecef;
  border-top: 1px solid #ebecef;
  margin-bottom: 24px;
  img {
    width: 16px;
    height: 16px;
    position: relative;
    right: 5px;
    top: 2px;
  }
  span{
    font-size: 14px;
    font-weight: 600;
  }
}
.other-title {
  margin-top: 24px;
}
.table_profession {
  margin-top: 24px;
}
// 文件上传
.img_box {
  height: 36px;
  width: 36px;
  background: #0d72ff;
  text-align: center;
  border-radius: 0px 4px 4px 0px;
  position: absolute;
  right: -1px;
  top: -1px;
  img {
    width: 16px;
    height: 16px;
  }
}
// 模版下载
.demo-download {
  width: 72px;
  height: 32px;
  line-height: 32px;
  color: #0d72ff;
  font-size: 14px;
  cursor: pointer;
  padding-left: 16px;
}

.unit {
  width: 52px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #666;
  background: #f6f6f6;
  border-radius: 0px 4px 4px 0px;
  border: 1px solid #d8d8d8;
  position: absolute;
  left: 88%;
  top: 0px;
}
</style>
<style lang="scss">
/**表单label取消加粗 */
.card-form {
  label {
    font-weight: normal !important;
  }
}
.submit-outBox {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
/* 弹出窗样式 */
.dialog-box {
  .el-dialog__body {
    padding: 24px 69px 24px 69px;
    border-top: 1px solid #ebecef;
    border-bottom: 1px solid #ebecef;
    label {
      font-weight: 400 !important;
    }
  }
  .el-dialog__footer {
    padding: 16px 20px;
  }
  .el-dialog__headerbtn {
    background: url("../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-dialog__close {
      visibility: hidden;
    }
  }
}
/* 删除弹出框样式 */
.del_box {
  width: 345px;
  height: 175px;
  .el-message-box__headerbtn {
    background: url("../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-message-box__close {
      visibility: hidden;
    }
  }
  .el-message-box__content {
    padding: 26px 95px;
    font-size: 16px;
    .el-message-box__status.el-icon-warning {
      color: #ea4747;
    }
    .el-message-box__status + .el-message-box__message {
      padding-right: 0;
    }
  }
}
// 文本域样式修改
.form-textarea {
  .el-form-item__content{
    margin-left: 0 !important;
  }
}
</style>
